<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幸运大抽奖</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/style2.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/fun.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
		//2015-6-6
		//winnerList
		jQuery(".winnerList").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:9,interTime:50});

           var click = 1; //控制在一次抽奖结束前下次点击无效
           var index; //控制的抽奖结束后效果的还原
           $("#lotteryBtn").click(function () {
               //进行判断是否抽奖完毕
               if (click != 1) {
                   return;
               }
               click++;
               //抽奖完后将图片还原到初始状态  
               if (index != 1) {
                   $("#L1").find('.mask').show();
                   $("#L" + index).find('.mask').hide();
               }
               var i = 1; //图片轮播的地方
               var T = 1; //控制转了多少圈才停下来的变量
               var math = Math.floor(Math.random() * 100);//此处纯js,所以随便写的概率
               var time = setInterval(function () {
                   i++;
                   //控制图片轮播的范围（10张图片）
                   if (i > 10) {
                       i = 1;
                       T++;
                   };
                   index = i;
                   //此处为图片的滚动
                   if (i == 1) {
                       $("#L10").find('.mask').hide();
                   }
                   $("#L" + i).find('.mask').show();
                   $("#L" + (i * 1 - 1)).find('.mask').hide();
                   //当滚动5圈后开始出奖
                   if (T == 5) {
                        //概率
                       if (math >= 0 && math <= 10) {
                       //在第几个图片停下来（下面以此类推）
                           if (i == 1) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你中奖了！,2个杯面！");
                           }
                       }
                       if (math >= 11 && math <= 30) {
                           if (i == 2) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你获得10积分！");
                           }
                       }
                       if (math >= 31 && math <= 40) {
                           if (i == 3) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你中奖了！,1包脆紫菜！");
                           }
                       }
                       if (math >= 41 && math <= 50) {
                           if (i == 4) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你获得50积分！");
                           }
                       }
                       if (math >= 51 && math <= 55) {
                           if (i == 5) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你中奖了！,1桶薯片！");
                           }
                       }
                       if (math == 56) {
                           if (i == 6) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你获得500积分！");
                           }
                       }
                       if (math >= 57 && math <= 77) {
                           if (i == 7) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你中奖了！,1盒百利滋！");
                           }
                       }
                       if (math == 78 || math == 79) {
                           if (i == 8) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你获得120积分！");
                           }
                       }
                       if (math >= 80 && math <= 89) {
                           if (i == 9) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你中奖了！,1桶虾条！");
                           }
                       }
                       if (math >= 90 && math <= 99) {
                           if (i == 10) {
                               clearInterval(time);
                               click = 1;
                               alert("恭喜你获得20积分！");
                           }
                       }
                   }
               }, 200)
		   });
	});
</script>
</head>

<body>
	<div class="top">
		<div class="wrap clearfix">
			<div class="top-left">
				<a href="#" class="collect"><i class="star"></i>收藏捷省商城</a><a href="#"><i class="add"></i>容桂</a><span>切换城市</span>
			</div>
			<div class="top-right">
				<a href="#" class="active">登陆</a><a href="#">免费注册</a><a href="#">我的收藏</a><a href="#">在线客服</a><a href="#">关于我们</a>
			</div>
		</div>
	</div>
	<!--top end-->
	<div class="header wrap clearfix">
		<div class="logo"><a href="/"><img src="images/logo.png" alt="logo" /></a></div>
		<div class="searchBox">
			<form method="get" action="#" class="search">
				<input type="text" value="" class="txt" fs="可口可乐" />
				<input type="submit" value="搜  索" class="btn" />
			</form>
			<p class="hotSearch"><a href="#">红牛</a><a href="#">怡泉+C</a><a href="#">马来西亚芒果汁</a><a href="#">印尼炒面</a></p>
		</div>
		<!--新加入 div  start-->
		<div class="topad">
    		<img src="images/topbannerright.jpg" height="64" alt="捷省网">
    	</div>
		<!--新加入 div  end-->
		<div class="headerBtn">
			<!--<div class="btn"><a href="#" class="pf">批发</a></div>-->
			<div class="btn" id="cartBtn">
				<a href="#" class="cart"><i>1</i>购物车</a>
				<div class="dropdownCart">
					<i></i>
					<div class="dropdownBox">
						<div class="dropdownBox-title">共1件商品</div>
						<ul class="addCartProduct">
							<li><span>x1</span><a href="#"><img src="images/addCartProduct.png" alt="加入购物车的商品" />原味芝士饼干</a></li>
						</ul>
						<div class="dropdownBox-bottom">共计：<span>￥12.00</span><a href="#">去结算</a></div>
					</div>
				</div>
			</div>
			<!--<div class="signBox">
				<span id="sign"><em>签到</em><i>签到拿积分</i></span>
				<div class="dropdownSign" id="dropdownSign">
					<i></i>
					<div class="signDesc">
						<div class="signDesc-left"><img src="images/calendar.jpg" alt="日历" /></div>
						<div class="signDesc-right">
							<div class="signDesc-right-top">已连续签到<em>16</em>天</div>
							<div class="signDesc-right-content">
								<p>100积分=1元<br>可直接抵扣订单金额</p>
								<p class="p2">第一天签到可获5积分，连续签到每天<br>多增加5积分，每天最高领取20积分。</p>
								<a href="#">积分兑换<b></b></a>
							</div>
						</div>
					</div>
				</div>
			</div>-->
		</div>
	</div>
	<!--header end-->
	<div class="lottery">
		<div class="wrap clearfix">
			<div class="lotteryTable">
				<h1 class="tit">幸运大抽奖</h1>
				<div class="mask"></div>
				<div class="winner">
					<h3 class="winnerName">中奖名单：</h3>
					<div class="winnerList">
						<div class="bd">
							<ul>
								<li>kjg*** 抽中了<span>20积分</span></li>
								<li>123*** 抽中了<span>10积分</span></li>
								<li>浩浩2*** 抽中了<span>一包辣条</span></li>
								<li>blo*** 抽中了<span>20积分</span></li>
								<li>123*** 抽中了<span>120积分</span></li>
								<li>5pp*** 抽中了<span>20积分</span></li>
								<li>56+*** 抽中了<span>20积分</span></li>
								<li>uyr*** 抽中了<span>3包yumyum</span></li>
								<li>123*** 抽中了<span>20积分</span></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="myWinner"><a href="#" class="rule">查看抽奖规则></a><a href="#" class="me">我的奖品</a></div>
			</div>
			<ul class="nowLottery clearfix">
				<li id="L1">
					<img src="images/prize01.jpg" alt="奖品" />
					<div class="mask" style="display:block;"></div>
				</li>
				<li id="L2">
					<img src="images/point01.jpg" alt="积分" />
					<div class="mask"></div>
				</li>
				<li id="L3">
					<img src="images/prize02.jpg" alt="奖品" />
					<div class="mask"></div>
				</li>
				<li id="L4">
					<img src="images/point02.jpg" alt="积分" />
					<div class="mask"></div>
				</li>
				<li id="L10">
					<img src="images/point03.jpg" alt="奖品" />
					<div class="mask"></div>
				</li>
				<li class="liBtn"><span id="lotteryBtn">立即抽奖<i>15积分/次</i></span></li>
				<li id="L5">
					<img src="images/prize03.jpg" alt="积分" />
					<div class="mask"></div>
				</li>
				<li id="L9">
					<img src="images/prize04.jpg" alt="奖品" />
					<div class="mask"></div>
				</li>
				<li id="L8">
					<img src="images/point04.jpg" alt="积分" />
					<div class="mask"></div>
				</li>
				<li id="L7">
					<img src="images/prize05.jpg" alt="奖品" />
					<div class="mask"></div>
				</li>
				<li id="L6">
					<img src="images/point05.jpg" alt="积分" />
					<div class="mask"></div>
				</li>
			</ul>
		</div>
	</div>
	<!--lottery end-->
	<div class="prize">
		<div class="wrap">
			<h3 class="tit">本期奖品</h3>
			<ul class="prizeList clearfix">
				<li>
					<a href="#">
						<img src="images/prize01.jpg" alt="奖品" />
						<span>yumyum杯面</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/prize02.jpg" alt="奖品" />
						<span>脆紫菜</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/prize03.jpg" alt="奖品" />
						<span>薯片</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/prize04.jpg" alt="奖品" />
						<span>虾条</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/prize05.jpg" alt="奖品" />
						<span>百力滋</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--prize end-->
	<ul class="advantageList wrap clearfix">
		<li>
			<i class="i1"></i>
			<h3>100%</h3>
			<p>正品保障</p>
		</li>
		<li>
			<i class="i2"></i>
			<h3>7天</h3>
			<p><em>无理由</em>退换货</p>
		</li>
		<li>
			<i class="i3"></i>
			<h3>信赖</h3>
			<p><em>20W客户</em>的选择</p>
		</li>
		<li>
			<i class="i4"></i>
			<h3>全部商品</h3>
			<p><em>实物</em>拍摄</p>
		</li>
		<li>
			<i class="i5"></i>
			<h3>用心服务</h3>
			<p><em>16点前下单当天送达</em></p>
		</li>
		<li>
			<i class="i6"></i>
			<h3>贴心特价</h3>
			<p><em>会员专属</em>折扣服务</p>
		</li>
		<li>
			<i class="i7"></i>
			<h3>在线支付</h3>
			<p><em>满58</em>免运费</p>
		</li>
	</ul>
	<!--advantageList end-->
	<div class="wrap threeBlock clearfix">
		<div class="codeBox">
			<ul class="codeList">
				<li>
					<img src="images/code1.jpg" alt="微信二维码" />
					<span>官方公众号二维码</span>
				</li>
				<li>
					<img src="images/code2.jpg" alt="微博二维码" />
					<span>官方微薄二维码</span>
				</li>
			</ul>
		</div>
		<div class="redeem">
			<h3>积分兑换奖品</h3>
			<a href="#"><img src="images/redeem.jpg" alt="积分兑换" /></a>
		</div>
		<div class="comment">
			<h3>最新用户评论</h3>
			<div class="userComment">
				<div class="bd">
					<ul class="commentList">
						<li><span>50秒前</span><a href="#"><em>406277594：</em>物流速度很快很准时哦！</a></li>
						<li><span>1分钟前</span><a href="#"><em>喵喵1992：</em>很喜欢捷省网，东西还很便宜~~~</a></li>
						<li><span>1分钟前</span><a href="#"><em>吖久：</em>泰国香鱿鱼丝很好吃~推荐给你们</a></li>
						<li><span>2分钟前</span><a href="#"><em>45620：</em>哇塞真的准时送达耶！棒棒哒！</a></li>
						<li><span>1分钟前</span><a href="#"><em>吖久：</em>泰国香鱿鱼丝很好吃~推荐给你们 </a></li>
						<li><span>50秒前</span><a href="#"><em>406277594：</em>物流速度很快很准时哦！</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--threeBlock end-->
	<div class="footer">
		<div class="footerLink wrap">
			<dl class="linkList">
				<dt>新手入门</dt>
				<dd><i>·</i><a href="#">购物流程</a></dd>
				<dd><i>·</i><a href="#">商品验货与签收</a></dd>
				<dd><i>·</i><a href="#">联系客服</a></dd>
				<dd><i>·</i><a href="#">常见问题</a></dd>
				<dd><i>·</i><a href="#">用户帮助</a></dd>
			</dl>
			<dl class="linkList">
				<dt>配送服务</dt>
				<dd><i>·</i><a href="#">配送进度查询</a></dd>
				<dd><i>·</i><a href="#">配送范围及运费</a></dd>
				<dd><i>·</i><a href="#">准时达</a></dd>
			</dl>
			<dl class="linkList">
				<dt>支付方式</dt>
				<dd><i>·</i><a href="#">网上支付</a></dd>
				<dd><i>·</i><a href="#">银行转账</a></dd>
				<dd><i>·</i><a href="#">优惠券使用</a></dd>
			</dl>
			<dl class="linkList">
				<dt>售后服务</dt>
				<dd><i>·</i><a href="#">退换货政策</a></dd>
				<dd><i>·</i><a href="#">退换货地址</a></dd>
				<dd><i>·</i><a href="#">退款说明</a></dd>
				<dd><i>·</i><a href="#">售后服务电话</a></dd>
			</dl>
			<dl class="linkList">
				<dt>自助服务</dt>
				<dd><i>·</i><a href="#">取消订单</a></dd>
				<dd><i>·</i><a href="#">退换货申请</a></dd>
				<dd><i>·</i><a href="#">在线投诉</a></dd>
				<dd><i>·</i><a href="#">绑定手机/邮箱</a></dd>
				<dd><i>·</i><a href="#">积分兑换</a></dd>
			</dl>
			<dl class="linkList">
				<dt>招商合作</dt>
				<dd><i>·</i><a href="#">公司信息</a></dd>
				<dd><i>·</i><a href="#">商务合作</a></dd>
				<dd><i>·</i><a href="#">更新信息</a></dd>
			</dl>
		</div>
		<div class="bottom">
			<div class="wrap clearfix">
				<div class="footerLogo">
					<a href="#"><img src="images/footerLogo.png" alt="logo" /></a>
					<a href="#"><img src="images/police.png" alt="站点查询" style="margin-left:20px;" /></a>
					<a href="#"><img src="images/data.png" alt="站长统计" style="margin-left:8px;" /></a>
				</div>
				<div class="bottom-right">
					<p>
						联系电话：0757-22293043<br>
						联系邮箱：bjs666@126.com
					</p>
					<p>Copyright©2015捷省网，All Rights Reserved 粤ICP备14049256号-1</p>
				</div>
			</div>
		</div>
	</div>
	<!--footer end-->
	<!--右侧导航开始-->
	<div class="line"></div>
	<ul class="fixBar" id="fixBar">
		<li class="dd">
			<a href="#"><i></i></a>
			<div class="showBox">
				<div class="showText">我的订单</div>
				<div class="rightLine"></div>
			</div>
		</li>
		<li class="yh">
			<a href="#"><i></i></a>
			<div class="showBox">
				<div class="showText">优惠券</div>
				<div class="rightLine"></div>
			</div>
		</li>
		<li class="vip">
			<a href="#"><i></i></a>
			<div class="showBox">
				<div class="showText">会员等级</div>
				<div class="rightLine"></div>
			</div>
		</li>
		<li class="xx">
			<a href="#"><i></i></a>
			<div class="showBox">
				<div class="showText">会员信息</div>
				<div class="rightLine"></div>
			</div>
		</li>
		<li class="gwc">
			<a href="#"><i></i><span>我的购物车</span></a>
		</li>
	</ul>
	<ul class="fixBar2" id="fixBar2">
		<li class="qq">
			<i></i>
			<div class="showBox qq">
				<div class="qqService">
					<a href="#"><b></b>客服①</a><a href="#"><b></b>客服②</a>
				</div>
				<div class="rightLine"></div>
			</div>
		</li>
		<li class="ewm">
			<i></i>
			<div class="showBox ewm">
				<div class="ewmBox">
					<img src="images/code1.jpg" alt="二维码" />
					<em>官方二维码</em>
				</div>
				<div class="rightLine"></div>
			</div>
		</li>
		<li class="backTop">
			<i></i>
			<div class="showBox">
				<div class="showText">返回顶部</div>
				<div class="rightLine"></div>
			</div>
		</li>
	</ul>
</body>
</html>
